<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {

            width: 500px;
            height: 220px;
            background-color: #00a1cc;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            position: relative;
        }

    </style>
</head>
<body>
<div id="box" class="box">
    <div style="width: 9999px;">
        <div style="float: left">
            <img src="image/1.jpg" height="220">
            <img src="image/2.png" height="220">
            <img src="image/3.jpg" height="220">
            <img src="image/4.jpg" height="220">
            <img src="image/5.jpg" height="220">
        </div>
    </div>
</div>
<div id="box2" class="box">
    <div style="width: 9999px;">
        <div style="float: left">
            <img src="image/1.jpg" height="220">
            <img src="image/2.png" height="220">
            <img src="image/3.jpg" height="220">
            <img src="image/4.jpg" height="220">
            <img src="image/5.jpg" height="220">
        </div>
    </div>
</div>

<div id="box3" class="box">
    <div style="">
        <div style="">
            <img src="image/1.jpg" height="220">
            <img src="image/2.png" height="220">
            <img src="image/3.jpg" height="220">
            <img src="image/4.jpg" height="220">
            <img src="image/5.jpg" height="220">
        </div>
    </div>


</div>

<div id="box4" class="box">
    <div style="">
        <div style="">
            <img src="image/1.jpg" height="220">
            <img src="image/2.png" height="220">
            <img src="image/3.jpg" height="220">
            <img src="image/4.jpg" height="220">
            <img src="image/5.jpg" height="220">
        </div>
    </div>


</div>

<script>
    var box = document.getElementById('box');
    var box2 = document.getElementById('box2');
    function maquee(box,dir){
        var findObj = box.children[0].children[0];
        var willInsertObj = box.children[0];
        willInsertObj.appendChild(findObj.cloneNode(true))

        function move(){
            var step,condition,startPosition,attrName,attrNameSize;
            switch (dir){
                case "left":
                    attrName = 'scrollLeft';
                    attrNameSize = 'scrollWidth';
                    step = 1;
                    condition = (box[attrName] >= box[attrNameSize]/2);
                    startPosition = 0;
                    break;
                case "right":
                    attrName = 'scrollLeft'
                    attrNameSize = 'scrollWidth';
                    step = -1;
                    condition = (box[attrName] == 0);
                    startPosition =  box[attrNameSize]/2;
                    break;
                case 'up':
                    attrName = 'scrollTop'
                    attrNameSize = 'scrollHeight';
                    step = 1;
                    condition = (box[attrName] >= box[attrNameSize]/2);
                    startPosition = 0;
                    break;
                case 'down':
                    attrName = 'scrollTop'
                    attrNameSize = 'scrollHeight';
                    step = -1;
                    condition = (box[attrName] == 0);
                    startPosition =  box[attrNameSize]/2;
                    break;

            }

            if (condition){
                box[attrName] = startPosition;
            } else {
                box[attrName] =   box[attrName] + step;
            }

        }
        setInterval(move,5);
    }
    maquee(box,'right');
    maquee(box2,'left');
    maquee(box3,'up');
    maquee(box4,'down');
</script>
</body>
</html>